<!--
 * @Date: 2025-07-02 18:45:10
 * @LastEditTime: 2025-07-03 15:48:34
-->
<template>
  <div>
    <!-- 添加调试信息 -->

    
    <Drawer 
      v-model:open="open" 
      :title="currentRecord?.flowName" 
      :footer="null" 
      width="100%" 
      @close="closeDrawer" 
      destroyOnClose
    >
    <div class="details-content">

      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="源库对象采集">
          <sourceLibraryObjectCollection />
        </TabPane>
        <TabPane key="2" tab="目标库评估">
          <Suspense>
            <template #default>
              <targetLibraryAssessment />
            </template>
            <template #fallback>
              <MyLoading />
            </template>
          </Suspense>
        </TabPane>
      </Tabs>
    </div>
    </Drawer>
  </div>
</template>

<script >

import { Drawer, Tabs, TabPane } from 'ant-design-vue';
import MyLoading from '@/components/loading/loading.vue';
import MyError from '@/components/loading/error.vue';
import { defineAsyncComponent } from 'vue';
import sourceLibraryObjectCollection from './source/index.vue';
const targetLibraryAssessment = defineAsyncComponent({
  loader: () => import('./target/index.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});

export default {
  name: 'DetailsComponent',
  components: {
    Drawer,
    Tabs,
    TabPane,
    MyLoading,
    MyError,
    sourceLibraryObjectCollection,
    targetLibraryAssessment
  },
  data() {
    return {
      open: false,
      activeKey: '1',
      currentRecord: null
    }
  },
  mounted() {
    console.log('details component mounted');
    console.log('this.open:', this.open);
  },
  methods: {
    openDrawer(record) {
      console.log('openDrawer called with:', record);
      this.open = true;
      this.activeKey = '1';
      this.currentRecord = record;
      console.log('after setting open:', this.open);
    },

    closeDrawer() {
      console.log('closeDrawer called');
      this.open = false;
    },

  }
}   

</script>

<style scoped lang="scss">

.details-content{

  width:95%;
  margin: 0 auto;
}
</style>